<template>
  <div :class="['remarklist-attr-container ', remarkListVisable ? 'show' : 'hide']">
    <el-collapse-transition>
      <div v-show="remarkListVisable" class="remarklist-attr-view-drawer transition-box">
        <el-card
          shadow="never"
          class="remarklist-attr-view-card"
          :body-style="{ height: '82vh', padding: '15px 0 0', overflowY: 'auto' }"
        >
          <span>{{ title }}</span>
          <el-switch
            size="mini"
            v-model="remarkRange"
            active-value="1"
            inactive-value="0"
            @change="handleRemarkRangeChange"
          />
          <el-button
            size="mini"
            type="primary"
            @click="
              remarkListVisable = false
              closed = true
            "
            style="margin-top: 5px; margin-bottom: 30px"
            >关闭</el-button
          >
          <el-table
            size="mini"
            v-loading="loading"
            :data="remarkListData"
            highlight-current-row
            @row-click="onRemarkRowSelect"
            :row-class-name="getRowClassName"
            style="
              width: 100%;
              margin-top: -25px;
              margin-bottom: 0px;
              max-height: 80vh;
              min-height: 69vh;
              overflow-y: hidden;
            "
            height="80%"
          >
            <el-table-column type="index" width="50" label="序号">
              <template scope="scope">
                <span>{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}</span>
              </template>
            </el-table-column>
            <el-table-column label="帧号" prop="fileNumber" width="50" />
            <el-table-column property="name" label="错误描述" width="140">
              <template slot-scope="scope">
                <el-button type="text" @click="onRemarkCellSelect(scope.row)" class="remark-text-value">{{
                  scope.row.value
                }}</el-button>
              </template>
            </el-table-column>
            <el-table-column label="" width="140" v-if="updateVisible">
              <template slot-scope="scope">
                <div v-show="scope.row.updateVisible">
                  <el-input type="textarea" v-model="scope.row.reRemark" class="skip-shortcuts"></el-input>
                  <el-tooltip effect="grey" content="保存" placement="right-end">
                    <el-button
                      type="text"
                      icon="el-icon-check"
                      @click="updateComments(scope.row.remarkId, scope.row.reRemark, scope.row)"
                    ></el-button
                    >&nbsp;
                  </el-tooltip>
                  <el-tooltip effect="grey" content="取消" placement="right-end">
                    <el-button type="text" icon="el-icon-close" @click="cancelComments(scope.row)"></el-button>
                  </el-tooltip>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="80">
              <template slot-scope="scope">
                <el-button
                  v-if="checkrole(['admin', 'qa'])"
                  type="text"
                  icon="el-icon-delete"
                  @click="deleteComments(scope.row)"
                ></el-button
                >&nbsp;
                <el-button
                  type="text"
                  icon="el-icon-edit"
                  @click="editComments(scope.row)"
                  v-show="scope.row.updateBtnVisible"
                ></el-button>
              </template>
            </el-table-column>
            <el-table-column label="创建时间" prop="createTime" width="110" :show-overflow-tooltip="true" />
          </el-table>
          <pagination
            style="width: 100%; margin-top: -8px; margin-bottom: 0px"
            mini
            @pagination="queryList"
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            :layout="'prev, next, jumper'"
          />
          <pagination
            style="width: 100%; margin-top: 10px; margin-bottom: -20px"
            mini
            @pagination="queryList"
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            :layout="'total, pager'"
            :pager-count="5"
          />
        </el-card>
      </div>
    </el-collapse-transition>
  </div>
</template>

<script>
import { checkRole } from '@/utils/permission'
import { listRemarkBall, delRemarkBall, updateRemarkBall } from '@/api/mark/remarkBall'
import Cookies from 'js-cookie'

export default {
  name: 'RemarkList',
  props: {
    taskId: [String, Number],
    setPosition: Function,
    deleteRemark: Function,
    updateRemark: Function,
  },
  computed: {
    remarkList() {
      return this.$store.state.markData.remarkList
    },
  },
  data() {
    return {
      loading: false,
      remarkListVisable: false,
      remarkListData: [],
      selectObject: null,
      title: '所有批注列表',
      remarkRange: 1,
      closed: false,
      updateVisible: false,
      // 查询参数
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        parentId: 0,
        taskId: undefined,
        mQaResultId: undefined,
      },
      pageSizes: {
        type: Array,
        default() {
          return [5]
        },
      },
      layout: {
        type: String,
        default: 'total, sizes, prev, pager, next, jumper',
      },
      background: {
        type: Boolean,
        default: true,
      },
      autoScroll: {
        type: Boolean,
        default: true,
      },
    }
  },
  created() {},
  mounted() {
    this.remarkRange = 0
    document.addEventListener('keydown', this.keyDownHandler, false)
  },
  methods: {
    checkrole(role) {
      return checkRole(role)
    },
    show(visable) {
      if (Number(this.remarkRange) !== 0) {
        this.queryList(this.$route.query.mQaResultId)
      } else {
        this.queryList(null)
      }
      this.remarkListVisable = visable
      if (this.closed) {
        this.closed = false
        this.remarkListVisable = !this.remarkBallList
      }
    },
    queryList(mQaResultId) {
      this.loading = true
      this.remarkListData.splice(0, this.remarkListData.length)
      this.queryParams.taskId = Number(this.taskId)
      if (Number(this.remarkRange) !== 0) {
        this.queryParams.mQaResultId = this.$route.query.mQaResultId
      } else {
        this.queryParams.mQaResultId = null
      }
      listRemarkBall(this.queryParams).then((response) => {
        this.total = response.total
        this.listRemarkProceed(response.rows)
      })
    },
    listRemarkProceed(remarkBallList) {
      if (remarkBallList) {
        remarkBallList.forEach((ball) => {
          let value = null
          if (!ball.mType) {
            ball.mType = ''
          }
          if (ball.trackId) {
            if (ball.trackId.startsWith('lou-')) {
              value = '漏标' + ball.mType.replace('-', ':') + '-' + ball.remark
            } else {
              value = ball.trackId + '-' + ball.mType.replace('-', ':') + '-' + ball.remark
            }
          } else {
            value = ball.mType.replace('-', ':') + '-' + ball.remark
          }
          let reviewed = false
          let reviewRecord = Cookies.get('reviewRecord')
          if (reviewRecord && reviewRecord.indexOf(ball.remarkId + ',') >= 0) reviewed = true
          this.remarkListData.push({
            fileNumber: parseInt(ball.fileNumber) - 1,
            trackId: ball.trackId,
            remarkId: ball.remarkId,
            mType: ball.mType,
            remark: ball.remark,
            errorType: ball.errorType,
            mQaResultId: ball.mQaResultId,
            value: value,
            point: {
              x: ball.x,
              y: ball.y,
              z: ball.z,
            },
            createTime: ball.createTime,
            updateBtnVisible: true,
            updateVisible: false,
            reviewed: reviewed,
            reRemark: ball.remark,
          })
        })
      }
      this.loading = false
    },
    onRemarkCellSelect(row) {
      let tmp = ''
      if (Cookies.get('reviewRecord')) tmp += Cookies.get('reviewRecord')
      if (tmp.indexOf(row.remarkId + ',') < 0) {
        Cookies.remove('reviewRecord')
        Cookies.set('reviewRecord', tmp + row.remarkId + ',', { expires: 30 })
      }
      this.selectObject = row

      // this.remarkListVisable = false;
      this.$router.replace({
        path: '/mark/editor2d',
        query: {
          taskId: this.taskId,
          mQaResultId: row.mQaResultId,
          selectedObjectA1: row.trackId,
          rid: row.remarkId,
          index: row.fileNumber,
        },
      })

      if (this.setPosition) {
        let position = {
          x: row.point.x,
          y: row.point.y,
          z: row.point.z,
        }
        let type = this.selectObjViewType(row.mType)
        this.setPosition(row.trackId, row.mQaResultId, row.remark, type[0], type[1], row.errorType, row.point, position)
      }
    },
    onRemarkRowSelect(row, column, event) {
      this.selectObject = row
    },
    deleteComments(row) {
      this.selectObject = row
      if (this.selectObject) {
        this.$confirm('确定删除该条批注？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          delRemarkBall(this.selectObject.remarkId).then((response) => {
            if (response.code === 200) {
              this.msgSuccess('批注删除成功。')
              // if (this.updateRemark) {
              let type = this.selectObjViewType(this.selectObject.mType)[0]
              let elementsRemarkKey = this.selectObject.trackId
              if (!elementsRemarkKey.startsWith('lou-')) {
                elementsRemarkKey += '-' + this.selectObject.mType
              }
              this.deleteRemark(this.selectObject.trackId, type, elementsRemarkKey)
              // }
              this.selectObject = null
              listRemarkBall(this.queryParams).then((response) => {
                this.remarkList.set(response)
                this.remarkListData = []
                this.total = response.total
                this.listRemarkProceed(response.rows)
              })
            } else {
              this.msgError(response.msg)
            }
          })
        })
      }
    },
    editComments(row) {
      this.updateVisible = true
      row.updateVisible = true
    },
    cancelComments(row) {
      this.updateVisible = false
      row.updateVisible = false
    },
    updateComments(remarkId, remark, row) {
      this.updateVisible = false
      row.updateVisible = false
      this.updateBallData = this.remarkListData.filter((ball) => ball.remarkId == remarkId)
      if (this.updateBallData && this.updateBallData.length > 0) {
        let ball = this.updateBallData[0]
        updateRemarkBall({ remarkId: remarkId, remark: remark }).then((response) => {
          if (response.code === 200) {
            this.msgSuccess('批注修改成功。')
            ball.remark = remark
            ball.reRemark = remark
            ball.value = ball.trackId + '-' + ball.mType + '-' + ball.remark
            ball.updateVisible = false
            let type = this.selectObjViewType(this.selectObject.mType)[0]
            let elementsRemarkKey = ball.trackId + '-' + ball.mType
            this.updateRemark(ball.trackId, type, elementsRemarkKey, remark)
          } else {
            this.msgError(response.msg)
          }
        })
      }
    },
    keyDownHandler(e) {
      if (e.keyCode == 46 && e.ctrlKey === true) {
        if (this.checkrole(['admin', 'qa'])) this.deleteComments(this.selectObject)
      }
    },
    selectObjViewType(mType) {
      return (mType + '-').split('-')
    },
    handleRemarkRangeChange(val) {
      if (Number(val) === 1) {
        this.title = '当前帧批注列表'
        this.queryList(this.$route.query.mQaResultId)
      } else {
        this.title = '所有批注列表'
        this.queryList(null)
      }
    },
    setCurrent(row) {
      this.$refs.singleTable.setCurrentRow(row)
    },
    handleCurrentChange(val) {
      this.currentRow = val
    },
    getRowClassName({ row, rowIndex }) {
      let ret
      let tmp = ''
      if (Cookies.get('reviewRecord')) tmp += Cookies.get('reviewRecord')
      if (tmp.indexOf(row.remarkId + ',') >= 0) {
        ret = 'reviewed-row'
      } else {
        ret = 'unreviewed-row'
      }
      return ret
    },
  },
  beforeDestroy() {
    document.removeEventListener('keydown', this.keyDownHandler, false)
  },
}
</script>
<style lang="scss" scoped>
.remarklist-attr-container {
  position: absolute;
  right: 0;
  top: 55px;
  z-index: 1000;
  left: 75%;
}
.remarklist-attr-container.show {
  height: 83vh;
}
.remarklist-attr-container.hide {
  height: 0;
}
.remarklist-attr-view-btn {
  position: absolute;
  right: 44px;
  top: 0;
  z-index: 1001;
}
.remarklist-attr-view-drawer {
}
.remarklist-attr-view-card {
  width: 100%;
  border-radius: 0;
}
.remarklist-attr-view-card /deep/ .el-card__header {
  padding: 0 12px;
  line-height: 28px;
  height: 28px;
  min-height: auto;
}
.el-table /deep/.unreviewed-row {
  background: rgb(252, 251, 249);
}

.el-table /deep/.reviewed-row {
  background: rgb(252, 241, 221);
}

.el-table /deep/.th {
  padding: 0 !important;
  // height: 10px;
  // line-height: 10px;
}

.el-table /deep/.td {
  padding: 0 !important;
  // height: 10px;
  // line-height: 10px;
}

button.remark-text-value {
  word-wrap: break-word !important;
  word-break: break-all;
  white-space: normal;
  display: flex;
  align-items: center;
  text-align: left;
  line-height: 22px;
}
</style>
